import { computed, ref } from 'vue'
export default function useShortcut(props, groupRef) { // 参数一:数据 参数二:ul的Dom
  const ANCHOR_HEIGHT = 18
  const scrollRef = ref(null)
   const shortcutList = computed(() => { // 拿到数组中的tiltle 遍历到右侧字母
    return props.data.map((group) => {
      return group.title // 获取到所有title标题 返回
    })
   })
   const touch = {}
   function onShortcutTouchStart(e) { // 点击字母跳转的对应的内容
    // console.log(e.target)
    const anchorIndex = parseInt(e.target.dataset.index)// 拿到字母的索引
    touch.yl = e.touches[0].pageY // 拿到手指第一个坐标
    touch.anchorIndex = anchorIndex
    scrollTo(anchorIndex)
   }
   function onShortcutTouchMove(e) { // 滑动右侧字母显示
    touch.y2 = e.touches[0].pageY // 获取到手指滑动的位置
    const delta = (touch.y2 - touch.yl) / ANCHOR_HEIGHT | 0
    const anchorIndex = touch.anchorIndex + delta
    scrollTo(anchorIndex)
   }

   function scrollTo(index) { // 封装相同逻辑
    if (isNaN(index)) { // index如果不在li中 跳过
      return
    }
    // index 不能超过目标元素内部 最大区间 最大值最小值在他之接
    index = Math.max(0, Math.min(shortcutList.value.length - 1, index))
    const targetEl = groupRef.value.children[index] // 获取到对应的Dom
    const scroll = scrollRef.value.scroll // 获取到scroll的实例
    // console.log(targetEl)
    scroll.scrollToElement(targetEl) // scroll跳转到对应的位置
   }
   return {
    shortcutList,
    onShortcutTouchStart,
    scrollRef,
    onShortcutTouchMove
   }
}
